<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/pay.png}">
		<meta charset="UTF-8">
		<title>支付页面</title>
		<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"  href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" th:href="@{/css/shopping-alipay.css}" href="css/shopping-alipay.css"/>
		<link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" href="css/head.css" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/footer.css}" href="css/footer.css"/>
	</head>
	<body>
		<div class="title">
			<div class="trou">
				<a class="tophar fr" href="#">常见问题</a>
				<span class="tophar-link fr">你好，欢迎使用支付宝付款</span>
			    <div class="clear"></div>
			</div>
		</div>
		<div class="head-title">
			<div class="head-title-trou">
				<div class="photo">
					<img th:src="@{/img/pic-66.png}"/>
				</div>
				<span>我的收银台</span>
			</div>
		</div>
		<div class="content">
			<div class="content-top">
				<div class="infor-photo">
					<img th:src="@{/img/pic-67.png}"/>
				</div>
				<div class="information">
					<span>付款后资金直接进入对方账户</span>
					<div class="form">	
                                                                     若发生退款需联系收款方协商，如付款给陌生人，请谨慎操作。
					</div>
				</div>
				<div class="exchange">
					<span>正在使用即时到账交易</span>
					<span class="xiuxiu" data-role="J_questionIcon" seed="order-type-detail" style="cursor: pointer;color: #08c;">[?]</span>
				    <span class="fn-left create-time" id="teDelay">
                    <span class="exchange-line">交易将在<span id="teOrderDelayText">14分钟</span>后关闭，请及时付款！</span></span>
				</div>
				<div class="wangyi-eachange" th:text="'[网易严选支付订单]'+${session.indent.getIndentId()}">
					[网易严选支付订单]60646923
				</div>
			</div>
			<div class="content-foot">
				<div class="qrguide-area" id="J_qrguideArea" seed="NewQr_animationClick">
                                                  </div>
				<div class="xiangqing">
					订单详情
				</div>
				<div class="left-list fl">
					<div class="marleft">
						<div class="tit">
							扫一扫付款
						</div>
						<div class="money" th:text="${session.indent.getIndentPrice()}">
							1198.00
						</div>
					</div>
					<div class="code">
						<div class="pho">
							<img th:src="@{/img/Alipay.jpg}"/>
						</div>
						<div class="sao-name fl">
							<img th:src="@{/img/pic-101.png}"/>
						</div>
						<div class="sao-namelist fl">
							<span class="fl">打开手机支付宝</span><br>
							扫一扫继续付款
						</div>
						<div class="clear"></div>
					</div>
					<div class="qrPay">
						<a href="#">首次使用请下载手机支付宝</a>
					</div>
				</div>
				<div class="right-list fl">
					<div class="switch-tip-icon-wrapper">
						<img title="显示器" th:src="@{/img/pic-80_03.png}"/>
					</div>
					<div class="switch-tip-photo">
						<img th:src="@{/img/pic-66.png}"/>
					</div>
					<a class="switch-tip-btn" th:href="@{/customerLogin/login}" seed="J_tip_qr-switchTipBtn" smartracker="on">&lt;&nbsp;登录账户付款</a>
					<button type="button" id="cancel" class="switch-tip-btn" onclick="javascript:history.back(-1);" style="color:#fff;">取消</button></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="copyright">
				<div class="copyright-lin">
					<q class="copyright-line">ICP证：沪B2-20150087</q>
				</div>
				<div class="copyright-photo">
					<img class="pic fl" th:src="@{/img/pic-68.png}"/>
					<img class="pic fl" th:src="@{/img/pic-69.png}"/>
					<img class="pic fl" th:src="@{/img/pic-71.png}"/>
					<img class="pic fl" th:src="@{/img/pic-72.png}"/>
					<img class="pic fl" th:src="@{/img/pic-73.png}"/>
					<img class="pic fl" th:src="@{/img/pic-74.png}"/>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<script th:src="@{/js/jquery-3.3.1.min.js}" src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				//底部侧边栏关闭
				$(".icon-sidebarx").click(function() {
					$(this).parents(".sidebar-b-bac").remove();
				});
				//右边侧边栏关闭
				$(".icon-subx").click(function() {
					$(this).parents(".sub-list").css("display", "none");
				});
				//右边hover弹窗input隐藏出现
				$(".sub-inputbox").click(function() {
					$(this).prev(".icon-inputx").css("opacity", 1);
				});
				//下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
				$(window).scroll(function() {
					var top = $(document).scrollTop();
					if(top > 200) {
						$(".sidebar-r-totop").css({
							display: 'block'
						});
						$(".navigation-fix").slideDown();
					} else {
						$(".sidebar-r-totop").css({
							display: 'none'
						});
						$(".navigation-fix").slideUp();
					}
				});
				//点击回到顶部，回到顶部
				$(".sidebar-r-totop").click(function() {
					$("html,body").animate({
						scrollTop: 0
					}, 500);
				});

			})
		</script>

		<script type="text/javascript">
			$(".xiuxiu").hover(function(){
				$(".information").css("display","block");
				$(".infor-photo").css("display","block");
			},function(){
				$(".information").css("display","none");
				$(".infor-photo").css("display","none");
			})
			$(".qrguide-area-img").click(function(){
				$(this).css("display","none");
				$(this).siblings(".qrguide-area-img1").css("display","block");
			})
			$(".qrguide-area-img1").click(function(){
				$(this).css("display","none");
				$(this).siblings(".qrguide-area-img").css("display","block");
			})
		</script>
	</body>
</html>
